<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />
    <div class="contentBattery">
      <div class="contentBatterydiv">
        Total Amount Credited：<span class="contentBatteryspan">{{
          "$" + params.inTotalMoney || "$0.00"
        }}</span>
      </div>
      <!-- <div>出账总Money：<span>{{ params.outTotalMoney || 0 }}</span>元</div> -->
    </div>
    <r-table
      class="mt20"
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />

    <!-- 提现按钮--表单 -->
    <el-dialog
      title="Withdrawal"
      :visible.sync="withdrawDialog"
      width="600px"
      :before-close="withdrawDialogClose"
    >
      <div class="plr30">
        <el-form
          :model="widthdrawForm"
          ref="widthdrawForm"
          label-width="120px"
          label-position="left"
          :rules="widthdrawRuleForm"
        >
          <el-form-item label="Can Withdrawal Balance">
            <span>${{ withdrawInfo.withdrawMoney }}</span>
          </el-form-item>
          <el-form-item label="Withdrawal Amount($)" prop="money">
            <el-input
              type="number"
              min="1"
              v-model="widthdrawForm.money"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="withdrawDialogClose">Cancel</el-button>
        <el-button type="primary" @click="withdrawRecord_save"
          >Confirm</el-button
        >
      </span>
    </el-dialog>

    <!-- 提现Record按钮--表单 -->
    <el-dialog
      title="Withdrawal Record"
      :visible.sync="withdrawDialoGrecord"
      width="90%"
      :before-close="withdrawDialogClose"
    >
      <div class="plr30">
        <el-table v-loading="loading" :data="roleList">
          <el-table-column label="Withdrawal Status" align="center">
            <template slot-scope="scope">
              {{
                scope.row.status == 3
                  ? "No Pass"
                  : scope.row.status == 2
                  ? "Pass"
                  : "Pending Review"
              }}
            </template>
          </el-table-column>
          <el-table-column label="Withdrawal Amount" align="center">
            <template slot-scope="scope">
              {{ scope.row.money ? scope.row.money : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="Current Balance" align="center">
            <template slot-scope="scope">
              {{ scope.row.currentMoney ? scope.row.currentMoney : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="Bank Name" align="center">
            <template slot-scope="scope">
              {{ scope.row.bankName ? scope.row.bankName : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="Credit Card Numbers" align="center">
            <template slot-scope="scope">
              {{ scope.row.bankCard ? scope.row.bankCard : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="Opening Bank" align="center">
            <template slot-scope="scope">
              {{ scope.row.bankDeposit ? scope.row.bankDeposit : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="Phone" align="center">
            <template slot-scope="scope">
              {{ scope.row.bankPhone ? scope.row.bankPhone : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="Order Number" align="center">
            <template slot-scope="scope">
              {{ scope.row.orderNo ? scope.row.orderNo : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="Withdrawal ID" align="center">
            <template slot-scope="scope">
              {{ scope.row.id ? scope.row.id : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="Withdrawal No Pass Cause" align="center">
            <template slot-scope="scope">
              {{ scope.row.rejectReason ? scope.row.rejectReason : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="Withdrawal Time" align="center">
            <template slot-scope="scope">
              {{ scope.row.ctime ? scope.row.ctime : nulls }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="withdrawDialogClose">Cancel</el-button>
        <el-button type="primary" @click="withdrawRecord_save">Confirm</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import VueQr from "vue-qr";
export default {
  components: { VueQr },
  data() {
    // Withdrawal Amount的校验规则
    const checkMoney = (rule, value, callback) => {
      if (value <= 0) {
        callback(
          new Error("Withdrawal Amount It needs to be greater than zero")
        );
      } else if (value > this.withdrawInfo.withdrawMoney) {
        callback(
          new Error("Withdrawal Amount Can not exceed the withdrawal Balance!")
        );
      } else {
        callback();
      }
    };
    return {
      withdrawInfo: {
        codeUrl: "",
        agentId: "",
        phone: "",
        withdrawMoney: 0
      },
      // 提现按钮--表单的开关
      withdrawDialog: false,
      // 提现Record按钮--表单的开关
      withdrawDialoGrecord: false,
      // 遮罩层
      loading: false,
      // 角色表格Data
      roleList: [],
      nulls: "--",
      // 提现按钮--表单
      widthdrawForm: {
        money: "" //Withdrawal Amount
      },
      // 提现按钮校验
      widthdrawRuleForm: {
        money: [
          { required: true, message: "Withdrawal Amount can not be empty" },
          { validator: checkMoney, trigger: "blur" }
        ]
      },
      searchData: {
        orderNo: "",
        userType: "",
        type: "",
        payType: "",
        beginTime: "",
        endTime: "",
        deviceNo: ""
      },
      searchForm: [
        {
          type: "input",
          placeholder: "Order Nnumber",
          prop: "orderNo",
          width: 250
        },
        {
          type: "select",
          placeholder: "Transaction Party",
          prop: "userType",
          width: 260,
          options: [
            { label: "Ordinary User", value: "1" },
            { label: "Operator", value: "2" },
            { label: "Agent", value: "3" }
          ]
        },
        // {
        //   type: "daterange",
        //   placeholder: "Transaction Time",
        //   prop: "date",
        //   width: 300,
        //   change: (val) => {
        //     if (val) {
        //       this.searchData.beginTime = val[0];
        //       this.searchData.endTime = val[1];
        //     } else {
        //       this.searchData.beginTime = "";
        //       this.searchData.endTime = "";
        //     }
        //   },
        // },
        {
          type: "date",
          placeholder: "Start Date",
          prop: "beginTime",
          width: 220,
          change: val => {
            this.searchData.beginTime = val;
          }
        },
        {
          type: "date",
          placeholder: "End Date",
          prop: "endTime",
          width: 220,
          change: val => {
            this.searchData.endTime = val;
          }
        },
        {
          type: "select",
          placeholder: "Transaction Method",
          prop: "payType",
          width: 275,
          options: [
            { label: "WeChat", value: 1 },
            { label: "Balance", value: 2 },
            { label: "Bank Card", value: 3 },
            { label: "Alipay", value: 4 }
          ]
        },
        {
          type: "select",
          placeholder: "Deal Type",
          prop: "type",
          width: 230,
          options: [
            { label: "Electricity Change Consumption", value: "1" },
            // { label: "充电消费", value: "2" },
            // { label: "租车消费", value: "3" },
            { label: "User Top Up", value: "4" },
            { label: "Order Refund", value: "5" },
            { label: "Agent Withdrawal", value: "6" },
            { label: "Deposit Payment", value: "7" },
            { label: "Deposit Withdrawal", value: "8" }
          ]
        },
        {
          type: "input",
          placeholder: "Device Number",
          prop: "deviceNo",
          width: 250
        }
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => {
            this.zeroFn();
            this.getData();
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              orderNo: "",
              userType: "",
              type: "",
              payType: "",
              beginTime: "",
              endTime: "",
              deviceNo: ""
            };
            this.zeroFn();
            this.getData();
          }
        }
        // {
        //   type: "success",
        //   label: "提现",
        //   isShow: (e) => sessionStorage.role == "agent",
        //   handle: (e) => {
        //     this.withdrawDialog = true;
        //     this.widthdrawForm = {
        //       money: "0",//Withdrawal Amount

        //     }
        //   },
        // },
        // {
        //   type: "primary",
        //   label: "提现Record",
        //   isShow: (e) => sessionStorage.role == "agent",
        //   handle: (e) => {
        //     this.withdrawDialoGrecord = true;
        //     this.testButton()
        //   },
        // },
        // {type:'primary',label:'Reset', handle: e => this.elFormSubmit(),}
      ],
      tableLoading: false,
      tableData: [],
      params: {
        inTotalMoney: "",
        outTotalMoney: ""
      },
      tableCols: [
        { label: "Order Nnumber", prop: "orderNo" },
        { label: "Device Number", prop: "deviceNo" },
        {
          label: "Order Type",
          prop: "type",
          formatter: row => {
            if (row.type == 1) {
              return "Battery Swap Consumption";
            } else if (row.type == 2) {
              return "Charging Consumption";
            } else if (row.type == 3) {
              return "Rental Car Consumption";
            } else if (row.type == 4) {
              return "User Top Up";
            } else if (row.type == 5) {
              return "Order Refund";
            } else if (row.type == 6) {
              return "Agent Withdrawal";
            } else if (row.type == 7) {
              return "Deposit Payment";
            } else if (row.type == 8) {
              return "Deposit Withdrawal";
            } else if (row.type == 9) {
              return "Collect Red Envelopes(New User）";
            } else {
              return "--";
            }
          }
        },
        {
          label: "Transaction Party",
          prop: "userType",
          formatter: row => {
            if (row.userType == 1) {
              return "Ordinary User";
            } else if (row.userType == 2) {
              return "Operator";
            } else if (row.userType == 3) {
              return "Agent";
            } else {
              return "Unknown User";
            }
          }
        },
        { label: "Phone", prop: "phone" },
        { label: "Party Information", prop: "userName" },
        { label: "Transaction Amount", prop: "money" },
        {
          label: "Transaction Method",
          prop: "payType",
          formatter: row => {
            if (row.payType == 1) {
              return "WeChat";
            } else if (row.payType == 2) {
              return "Balance";
            } else if (row.payType == 3) {
              return "Bank Card";
            } else if (row.payType == 4) {
              return "Alipay";
            } else {
              return "Unknown";
            }
          }
        },
        { label: "Transaction Time", prop: "ctime" }
      ],
      tableHandles: [
        {
          label: "Export Transactions",
          type: "primary",
          icon: "el-icon-download",
          plain: true,
          loading: false,
          handle: async e => {
            const res = await this.apis.tradeRecordExport(this.searchData);
            // console.log(333, this.searchData, res.msg);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.code == 200 ? "success" : "error"
            });
            location.href = process.env.VUE_APP_URL + res.msg;
          }
        }
      ],
      pagination: { limit: 10, offset: 1, total: 0 }
    };
  },
  created() {},
  mounted() {
    this.getData();
    if (sessionStorage.role == "agent") {
      // this.withdrawRecord_getAgentInfo();
    }
  },
  methods: {
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    async testButton() {
      const res = await this.apis.withdrawRecordAgentId(
        this.withdrawInfo.agentId
      );
      console.log(22222222333, res.rows);
      this.roleList = res.rows;
    },
    // 获取Agent提现 - 账户信息
    async withdrawRecord_getAgentInfo() {
      const res = await this.apis.withdrawRecord_getAgentInfo();
      this.withdrawInfo = res.data;
      console.log("Money", this.withdrawInfo.withdrawMoney);
    },
    // 提现按钮--表单--Cancel按钮
    withdrawDialogClose() {
      this.withdrawDialog = false;
      this.withdrawDialoGrecord = false;
      this.withDrawMoney = "";
    },
    // 提现按钮--表单--确认按钮
    withdrawRecord_save() {
      this.$refs.widthdrawForm.validate(async valid => {
        if (valid) {
          const res = await this.apis.withdrawRecord_save(this.widthdrawForm);
          this.$message({
            message: "Operations Success",
            type: "success"
          });
          this.withdrawDialog = false;
          if (sessionStorage.role == "agent") {
            this.withdrawRecord_getAgentInfo();
          }
        }
      });
    },
    async usersys_updata(row) {
      var res = await this.apis.usersys_updata({
        id: row.id,
        state: row.state == 34 ? 35 : 34
      });
      this.getData();
    },
    async getData() {
      var res = await this.apis.tradeRecord_list({
        orderNo: this.searchData.orderNo,
        userType: this.searchData.userType,
        beginTime: this.searchData.beginTime,
        endTime: this.searchData.endTime,
        type: this.searchData.type,
        payType: this.searchData.payType,
        deviceNo: this.searchData.deviceNo,
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit
      });
      // console.log(res);
      var list = res.rows || [];

      this.tableData = list;
      this.params = res.params;
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss">
.contentBattery {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
  width: 800px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  left: 0px;
  top: 0;
}

.contentBatterydiv {
  width: 350px;
}

.contentBatterydiv:nth-child(1) {
  margin-right: 50px;
}

.contentBatteryspan {
  margin-right: 5px;
  color: #000cff;
}
</style>
